"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Loader2, AlertCircle, CheckCircle2 } from "lucide-react"
import { dynamicGraphFacetnet } from "@/app/algorithms/lib/algorithms/dynamic-graph-facetnet"
import DynamicGraphComponent from "./DynamicGraphComponent"
import AlgorithmForm from "./AlgorithmForm"
import { CustomGraphVisualization } from "./CustomGraphVisualization"

export default function DynamicGraphFacetnetPage() {
  const [result, setResult] = useState<any>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [executionSteps, setExecutionSteps] = useState<string[]>([])
  const [currentStep, setCurrentStep] = useState(0)
  const [executionTime, setExecutionTime] = useState<string | null>(null)

  const onSubmit = async (formData: Record<string, any>) => {
    setLoading(true)
    setError(null)
    setResult(null)
    setExecutionSteps([])
    setCurrentStep(0)
    
    try {
      // 执行算法
      const algorithmResult = await dynamicGraphFacetnet.execute(formData)
      
      // 更新状态
      setResult(algorithmResult.data)
      setExecutionSteps(algorithmResult.steps)
      setExecutionTime(algorithmResult.executionTime)
      
      // 模拟步骤执行过程
      let step = 0
      const stepInterval = setInterval(() => {
        if (step < algorithmResult.steps.length - 1) {
          step++
          setCurrentStep(step)
        } else {
          clearInterval(stepInterval)
        }
      }, 500)
      
    } catch (err: any) {
      setError(err.message || "算法执行出错")
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="container py-6 space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">动态异构图生成与社区发现算法</h1>
        <p className="text-muted-foreground">
          基于FacetNet的动态异构图生成和社区发现算法，支持多时间步的动态网络分析
        </p>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className="md:col-span-1">
          <CardHeader>
            <CardTitle>算法参数</CardTitle>
            <CardDescription>
              配置社区发现算法参数
            </CardDescription>
          </CardHeader>
          <CardContent>
            <AlgorithmForm
              configOptions={dynamicGraphFacetnet.configOptions}
              onSubmit={onSubmit}
              loading={loading}
            />
          </CardContent>
        </Card>
        
        <div className="md:col-span-2 space-y-6">
          {loading && (
            <Card>
              <CardContent className="pt-6">
                <div className="flex flex-col items-center justify-center py-8 space-y-4">
                  <Loader2 className="h-8 w-8 animate-spin text-primary" />
                  <div className="space-y-2 text-center">
                    <h3 className="font-semibold">算法执行中...</h3>
                    <p className="text-sm text-muted-foreground">正在执行步骤 {currentStep + 1}/{executionSteps.length}：{executionSteps[currentStep]}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}
          
          {error && (
            <Alert variant="destructive">
              <AlertCircle className="h-4 w-4" />
              <AlertTitle>执行出错</AlertTitle>
              <AlertDescription>
                {error}
              </AlertDescription>
            </Alert>
          )}
          
          {result && (
            <div className="space-y-6">
              <Card>
                <CardHeader className="pb-2">
                  <div className="flex items-center justify-between">
                    <CardTitle>执行结果</CardTitle>
                    <div className="flex items-center text-sm text-muted-foreground">
                      <CheckCircle2 className="mr-1 h-4 w-4 text-green-500" />
                      完成时间: {executionTime}
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="whitespace-pre-wrap font-mono text-sm">
                    {result.summary}
                  </div>
                </CardContent>
              </Card>
              
              <Tabs defaultValue="static">
                <TabsList>
                  <TabsTrigger value="static">静态视图</TabsTrigger>
                  <TabsTrigger value="dynamic">动态视图</TabsTrigger>
                </TabsList>
                <TabsContent value="static" className="space-y-4">
                  <div className="rounded-lg border overflow-hidden">
                    {result.graphData && <CustomGraphVisualization data={result.graphData} />}
                  </div>
                </TabsContent>
                <TabsContent value="dynamic">
                  <Card>
                    <CardContent className="pt-6">
                      {result.graphData && (
                        <DynamicGraphComponent 
                          data={result.graphData} 
                          timeSteps={result.timeSteps || 3}
                        />
                      )}
                    </CardContent>
                  </Card>
                </TabsContent>
              </Tabs>
            </div>
          )}
        </div>
      </div>
    </div>
  )
} 